<template>
  <!-- 登录界面 -->
  <div v-if="!isLoggedIn" class="login-container">
    <div class="login-box">
      <h1 class="login-title">羽毛球场管理系统</h1>
      <div class="input-group">
        <label>用户名</label>
        <input v-model="username" type="text" placeholder="请输入用户名" @keyup.enter="handleLogin" />
      </div>
      <div class="input-group">
        <label>密码</label>
        <input v-model="password" type="password" placeholder="请输入密码" @keyup.enter="handleLogin" />
      </div>
      <button class="login-btn" @click="handleLogin">登录</button>
    </div>
  </div>

  <!-- 管理界面 -->
  <div v-else class="admin-container">
    <!-- 顶部栏（新增添加场地按钮） -->
    <div class="top-bar">
      <h1>羽毛球场管理系统</h1>

      <div
          class="admin-info-wrapper"
          @mouseenter="showLogout = true"
          @mouseleave="hideLogoutWithDelay"
      >
        <div class="admin-info">
          <span>{{ adminName }}</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
            <path fill="white" d="M7 10l5 5 5-5z"/>
          </svg>
        </div>
        <div
            v-if="showLogout"
            class="logout-menu"
            @mouseenter="showLogout = true"
            @mouseleave="hideLogoutWithDelay"
            @click="handleLogout"
        >
          退出登录
        </div>
      </div>
    </div>

    <!-- 新增：添加场地弹窗 -->
    <div v-if="showAddVenueDialog" class="modal-backdrop">
      <div class="modal">
        <div class="modal-header">
          <h3>添加新场地</h3>
          <button class="modal-close" @click="showAddVenueDialog = false">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>场地价格（元/小时）</label>
            <input
                type="number"
                v-model.number="newVenuePrice"
                min="0"
                step="0.01"
                placeholder="请输入价格"
                class="form-input"
            >
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger" @click="showAddVenueDialog = false">取消</button>
          <button class="btn btn-primary" @click="confirmAddVenue">确认添加</button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 左侧栏 -->
      <div class="sidebar">
        <div :class="['menu-item', { active: activeMenu === '场地管理' }]" @click="activeMenu = '场地管理'">
          场地管理
        </div>
        <div :class="['menu-item', { active: activeMenu === '用户管理' }]" @click="activeMenu = '用户管理'">
          用户管理
        </div>
        <div :class="['menu-item', { active: activeMenu === '订单管理' }]" @click="activeMenu = '订单管理'">
          订单管理
        </div>
        <div :class="['menu-item', { active: activeMenu.includes('公告') }]" @click="toggleAnnouncement">
          公告管理
        </div>
        <div v-if="showAnnouncementSub" :class="['menu-item sub-menu', { active: activeMenu === '发布公告' }]" @click="activeMenu = '发布公告'">
          发布公告
        </div>
        <div v-if="showAnnouncementSub" :class="['menu-item sub-menu', { active: activeMenu === '查看公告' }]" @click="activeMenu = '查看公告'">
          查看公告
        </div>
      </div>

      <!-- 内容区 -->
      <div class="content-area">
        <!-- 场地管理（核心修改区） -->
        <div v-if="activeMenu === '场地管理'" class="content-card">
          <!-- 标题和按钮横向排列容器 -->
          <div class="title-with-btn">
            <h2 class="content-title">场地管理</h2>
            <!-- 新增：添加场地按钮 -->
            <button class="add-venue-btn" @click="showAddVenueDialog = true">
              添加场地
            </button>
          </div>
          <table>
            <thead>
            <tr>
              <th>场地编号</th>
              <th>预定情况</th>
              <th>价格（元/小时）</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="venue in venues" :key="venue.id">
              <td>{{ venue.id }}</td>
              <td>
                <!-- 纯表格可视化，无文字描述 -->
                <div class="booking-table-container">
                  <table class="booking-detail-table">
                    <!-- 小时表头 -->
                    <thead>
                    <tr>
                      <th class="day-header">时段</th>
                      <th v-for="hour in 24" :key="hour" class="hour-header">{{ hour.toString().padStart(2, '0') }}:00</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 7天数据行 -->
                    <tr v-for="(dayData, dayIdx) in venue.bookingData" :key="dayIdx">
                      <td class="day-label">{{ getDateLabel(dayIdx)}}</td>
                      <td
                          v-for="(status, hourIdx) in dayData"
                          :key="hourIdx"
                          class="booking-cell"
                          :class="{ booked: status === 1 }"
                          @click="toggleBookingStatus(venue, dayIdx, hourIdx)"
                      ></td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td>{{ venue.gymprise }}</td>
              <td>
                <button class="btn btn-danger" @click="deleteVenue(venue.id)">删除</button>
                <button class="btn btn-primary" @click="editPrice(venue)">编辑价格</button>
<!--                <button class="btn" :class="venue.available ? 'btn-warning' : 'btn-success'" @click="toggleAvailability(venue)">-->
<!--                  {{ venue.available ? '设为不可预订' : '设为可预订' }}-->
<!--                </button>-->
              </td>
            </tr>
            </tbody>
          </table>
        </div>


        <div v-if="activeMenu === '用户管理'" class="content-card">
          <h2 class="content-title">用户管理</h2>
          <table>
            <thead>
            <tr>
              <th>电话</th>
              <th>姓名</th>
              <th>性别</th>
              <th>角色身份</th>
              <th>黑名单状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="user in users" :key="user.tel">
              <td>{{ user.tel }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.sex }}</td>
              <td>{{ user.role }}</td>
              <td>{{ user.islock === '1' ? '已加入' : '正常' }}</td>
              <td>
                <button class="btn" :class="user.islock === '1' ? 'btn-success' : 'btn-danger'" @click="toggleBlacklist(user)">
                  {{ user.islock === '1' ? '移出黑名单' : '加入黑名单' }}
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <div v-if="activeMenu === '订单管理'" class="content-card">
          <h2 class="content-title">订单管理</h2>
          <div class="search-box">
            <input v-model="searchTerm" type="text" placeholder="搜索订单号或手机号" class="search-input" />
            <button class="btn btn-primary" @click="searchOrders">搜索</button>
          </div>
          <table>
            <thead>
            <tr>
              <th>订单号</th>
              <th>预定场地</th>
              <th>预定人电话</th>
              <th>预定日期</th>
              <th>预定时间段</th>
              <th>下单时间</th>
              <th>订单状态</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="order in filteredOrders" :key="order.oderId">
              <td>{{ order.oderId }}</td>
              <td>{{ order.oderPlace }}</td>
              <td>{{ order.tel }}</td>
              <td>{{ order.playDay }}</td>
              <td>{{ order.playTime }}</td>
              <td>{{ order.oderTime }}</td>
              <td>{{ order.oderStatus }}</td>
            </tr>
            </tbody>
          </table>
        </div>

        <div v-if="activeMenu === '发布公告'" class="content-card">
          <h2 class="content-title">发布公告</h2>
          <div class="form-group">
            <label>标题</label>
            <input v-model="announcementForm.title" type="text" placeholder="请输入公告标题" class="form-input" />
          </div>
          <div class="form-group">
            <label>内容</label>
            <textarea v-model="announcementForm.content" placeholder="请输入公告内容" class="form-textarea" rows="6"></textarea>
          </div>
          <div class="form-group">
            <label>等级</label>
            <select v-model="announcementForm.level" class="form-select">
              <option value="0">不重要</option>
              <option value="1">重要</option>
            </select>
          </div>
          <button class="btn btn-primary" @click="publishAnnouncement">发布公告</button>
        </div>

        <div v-if="activeMenu === '查看公告'" class="content-card">
          <h2 class="content-title">查看公告</h2>
          <table>
            <thead>
            <tr>
              <th>公告编号</th>
              <th>标题</th>
              <th>内容</th>
              <th>发布人</th>
              <th>发布时间</th>
              <th>等级</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="announcement in announcements" :key="announcement.id">
              <td>{{ announcement.id }}</td>
              <td>{{ announcement.title }}</td>
              <td>{{ announcement.content }}</td>
              <td>{{ announcement.publisher }}</td>
              <td>{{ announcement.publishTime }}</td>
              <td>{{ announcement.level === 1 ? '重要' : '不重要' }}</td>
              <td>{{ announcement.isdelete === 1 ? '已下架' : '已发布' }}</td>
              <td>
                <button v-if="announcement.isdelete !== 1" class="btn btn-danger" @click="removeAnnouncement(announcement)">
                  下架
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getUsersList } from "@/api/admin/admin";
// 导入预定可视化工具（如需保留工具函数，无需删除）
import { bookingVisualizer } from "@/utils/change";
import { adminTokenStore } from "../../store/token";

// 登录状态
const username = ref('')
const password = ref('')
const showLogout = ref(false)
const tokenStore = adminTokenStore();
const isLoggedIn = ref(!!tokenStore.hasToken.value);
const adminName = ref(isLoggedIn.value ? '111' : '');

// 菜单状态
const activeMenu = ref('场地管理')
const showAnnouncementSub = ref(false)

// 搜索
const searchTerm = ref('')

// 公告表单
const announcementForm = ref({
  title: '',
  content: '',
  level: '0'
})

// 场地数据
const venues = ref([])

// 用户数据
const users = ref([])

// 订单数据
const orders = ref([])

// 公告数据
const announcements = ref([])

// 导入接口和工具
import { loginApi } from "@/api/admin/admin";
import toast from "@/utils/toast";
import { getOrders, getAllNotices, getGyms, addNotice } from "@/api/admin/admin";

onMounted(async () => {
  if (adminTokenStore().hasToken) {
    try {
      const [resUser, resOrder, resNotice, resGym] = await Promise.all([
        getUsersList(),
        getOrders(),
        getAllNotices(),
        getGyms()
      ])

      if (resUser?.code === 200) {
        users.value = resUser.data
      }

      if (resOrder?.code === 200) {
        orders.value = resOrder.data
      }

      if (resNotice?.code === 200) {
        announcements.value = resNotice.data
      }

      // 处理场地数据：给每个场地补充 bookingData（7天×24小时）
      if (resGym?.code === 200) {
        venues.value = resGym.data.map(venue => ({
          ...venue,
          bookingData: Array.isArray(venue.place) && venue.place.length === 7
              ? venue.place
              : Array(7).fill(0).map(() => Array(24).fill(0))
        }))
      }
    } catch (error) {
      console.error('初始化数据失败:', error)
    }
  }
})

// 登录处理
const handleLogin = async () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码');
    return;
  }

  try {
    const res = await loginApi({
      tel: username.value,
      psw: password.value
    });

    const { code, data, mes } = res;

    if (code === 200) {
      tokenStore.setToken(data);
      isLoggedIn.value = true;
      adminName.value = username.value;
      toast.success('登录成功');
    } else {
      toast.error('登录失败: ' + mes);
    }
  } catch (e) {
    toast.error('登录异常: ' + e);
  }
};

// 退出登录
const handleLogout = () => {
  isLoggedIn.value = false
  username.value = ''
  password.value = ''
  adminName.value = ''
  tokenStore().removeToken()
}

// 切换公告子菜单
const toggleAnnouncement = () => {
  showAnnouncementSub.value = !showAnnouncementSub.value
  if (!showAnnouncementSub.value) {
    if (activeMenu.value === '发布公告' || activeMenu.value === '查看公告') {
      activeMenu.value = '场地管理'
    }
  }
}
import { deleteGymById } from "@/api/admin/admin";

const deleteVenue = async (id) => {
  if (!confirm(`确定要删除ID为 ${id} 的场地吗？`)) {
    return; // 用户取消删除
  }

  try {
    // 调用删除接口
    const res = await deleteGymById(id);

    if (res?.code === 200) {
      toast.success('场地删除成功');
      // 接口删除成功后，从本地列表中移除该场地（同步页面）
      venues.value = venues.value.filter(v => v.id !== id);
    } else {
      toast.error('删除失败：' + (res?.mes || '未知错误'));
    }
  } catch (error) {
    console.error('删除场地失败：', error);
    toast.error('网络异常，删除失败');
  }
};
import {updatePlacePrice} from "@/api/admin/admin";
const editPrice = (venue) => {
  const newPrice = prompt(`请输入场地 ${venue.id} 的新价格：`, venue.gymprise)
  if (newPrice !== null && !isNaN(newPrice)) {
    venue.gymprise = parseFloat(newPrice)
  }
  const data=ref({
    "id":venue.id,
    "price":venue.gymprise
  });

  const {code,mes}=updatePlacePrice(data);
  if(code===200){
    toast.success(mes)
  }

}

const toggleAvailability = (venue) => {
  venue.available = !venue.available
  venue.status = venue.available ? '可用' : '不可用'
}

// 新增：点击单元格切换预定状态（1=已预定，0=未预定）
const toggleBookingStatus = (venue, dayIdx, hourIdx) => {
  // 若场地不可用，禁止修改
  if (!venue.available) {
    toast.warning('该场地已设为不可预订，无法修改预定状态');
    return;
  }
  venue.bookingData[dayIdx][hourIdx] = venue.bookingData[dayIdx][hourIdx] ? 0 : 1;
}
import {lockOrUnlockUser} from "@/api/admin/admin";
// 用户管理操作
const toggleBlacklist = async (user) => {
  // 后端返回的是字符串 '1'（已加入）和 '0'（正常）
  const newStatus = user.islock === '1' ? '0' : '1'
  
  try {
    const {code, mes} = await lockOrUnlockUser(user.tel)
    if (code === 200) {
      user.islock = newStatus
      toast.success("修改成功")
    } else {
      toast.error(mes || '操作失败')
    }
  } catch (error) {
    console.error('修改黑名单状态失败:', error)
    toast.error('网络异常，操作失败')
  }
}

// 订单搜索
const filteredOrders = computed(() => {
  if (!searchTerm.value) {
    return orders.value
  }
  return orders.value.filter(order =>
      String(order.oderId).includes(searchTerm.value) || String(order.tel).includes(searchTerm.value)
  )
})

const searchOrders = () => {}

// 发布公告（修复语法错误和异步问题）
const publishAnnouncement = async () => {
  if (!announcementForm.value.title || !announcementForm.value.content) {
    alert('请填写完整的公告信息')
    return
  }
  const now = new Date();
  const publishTime = now.getFullYear() + '-' +
      String(now.getMonth() + 1).padStart(2, '0') + '-' +
      String(now.getDate()).padStart(2, '0') + ' ' +
      String(now.getHours()).padStart(2, '0') + ':' +
      String(now.getMinutes()).padStart(2, '0') + ':' +
      String(now.getSeconds()).padStart(2, '0');

  const newId = announcements.value.length + 1;
  const newAnnouncement = {
    id: newId,
    title: announcementForm.value.title,
    content: announcementForm.value.content,
    publisher: adminName.value,
    publishTime: publishTime,
    level: announcementForm.value.level,
  };

  try {
    const res = await addNotice(newAnnouncement); // 补充 await 确保异步请求完成
    if (res.code === 200) {
      toast.success("发布成功");
      announcements.value.unshift(newAnnouncement);
    } else {
      toast.error("发布失败: " + res.mes);
    }
  } catch (e) {
    toast.error("发布异常: " + e);
  }

  // 清空表单
  announcementForm.value = {
    title: '',
    content: '',
    level: '0'
  };
}
import {deleteNotice} from "@/api/admin/admin";
// 下架公告
const removeAnnouncement = async (announcement) => {
  if (!confirm('确定要下架该公告吗？')) {
    return;
  }

  try {
    const {code, mes} = await deleteNotice(announcement.id);
    if (code === 200) {
      // 后端返回 isdelete 为数字 1 表示已下架
      announcement.isdelete = 1;
      toast.success("下架成功");
    } else {
      toast.error("下架失败: " + (mes || '未知错误'));
    }
  } catch (error) {
    console.error('下架公告失败:', error);
    toast.error('网络异常，下架失败');
  }
}

// 页面初始化（检测token）
onMounted(() => {
  if (adminTokenStore().hasToken) {
    isLoggedIn.value = true;
    adminName.value = '111';
  }
});



const showAddVenueDialog = ref(false) // 控制弹窗显示
const newVenuePrice = ref('') // 新场地价格

// 导入添加场地的接口（假设接口名为 addGym）
import { addGym } from "@/api/admin/admin"; // 补充 addGym 导入

// 新增：确认添加场地
const confirmAddVenue = async () => {
  // 验证价格（必须是正数）
  if (!newVenuePrice.value || newVenuePrice.value <= 0 || isNaN(newVenuePrice.value)) {
    toast.error('请输入有效的价格（大于0的数字）');
    return;
  }

  try {
    // 调用修改后的 addGym 接口，直接传递价格参数
    const res = await addGym(newVenuePrice.value);

    if (res?.code === 200) {
      toast.success('场地添加成功');
      // 重新获取场地列表刷新页面
      const gymRes = await getGyms();
      if (gymRes?.code === 200) {
        venues.value = gymRes.data.map(venue => ({
          ...venue,
          bookingData: Array.isArray(venue.place) && venue.place.length === 7
              ? venue.place
              : Array(7).fill(0).map(() => Array(24).fill(0))
        }));
      }
      // 关闭弹窗并重置价格
      showAddVenueDialog.value = false;
      newVenuePrice.value = '';
    } else {
      toast.error('添加失败：' + (res?.mes || '未知错误'));
    }
  } catch (error) {
    console.error('添加场地失败：', error);
    toast.error('网络异常，添加失败');
  }


};


let logoutTimer = null
const hideLogoutWithDelay = () => {
  if (logoutTimer) clearTimeout(logoutTimer)
  logoutTimer = setTimeout(() => {
    showLogout.value = false
  }, 500)
}// 500毫秒后隐藏


// 获取日期标签
const getDateLabel = (dayIdx) => {
  const today = new Date()
  const targetDate = new Date(today)
  targetDate.setDate(today.getDate() + dayIdx)

  const month = targetDate.getMonth() + 1
  const date = targetDate.getDate()
  const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const dayName = dayNames[targetDate.getDay()]

  if (dayIdx === 0) {
    return `今天 ${month}/${date} ${dayName}`
  } else if (dayIdx === 1) {
    return `明天 ${month}/${date} ${dayName}`
  } else if (dayIdx === 2) {
    return `后天 ${month}/${date} ${dayName}`
  } else {
    return `${month}/${date} ${dayName}`
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 登录界面样式 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  width: 400px;
}

.login-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.login-btn:hover {
  transform: translateY(-2px);
}

/* 管理界面样式 */
.admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 顶部栏 */
.top-bar {
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.top-bar h1 {
  font-size: 20px;
}

.admin-info-wrapper {
  position: relative;
  display: inline-block;
}

.admin-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  transition: background 0.3s;
}

.admin-info:hover {
  background: rgba(255,255,255,0.2);
}

.icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  fill: white;
}

.logout-menu {
  position: absolute;
  top: 48px;
  right: 0;
  background: white;
  color: #333;
  padding: 10px 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  white-space: nowrap;
  z-index: 100;
}

.logout-menu:hover {
  background: #f5f5f5;
}

/* 主内容区 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧栏 */
.sidebar {
  width: 220px;
  background: white;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  overflow-y: auto;
}

.menu-item {
  padding: 16px 24px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  font-size: 15px;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item.active {
  background: #eef2ff;
  border-left-color: #667eea;
  color: #667eea;
  font-weight: 500;
}

.sub-menu {
  padding-left: 50px;
  font-size: 14px;
}

/* 内容区 */
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f0f2f5;
}

.content-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.content-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

/* 搜索框 */
.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
}

/* 表单 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #667eea;
}

/* 通用表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

th {
  background: #fafafa;
  font-weight: 500;
  color: #666;
}

tr:hover {
  background: #fafafa;
}

/* 按钮样式 */
.btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.3s;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover {
  background: #5568d3;
}

.btn-danger {
  background: #f56c6c;
  color: white;
}

.btn-danger:hover {
  background: #e85a5a;
}

.btn-warning {
  background: #e6a23c;
  color: white;
}

.btn-warning:hover {
  background: #d49430;
}

.btn-success {
  background: #67c23a;
  color: white;
}

.btn-success:hover {
  background: #5daf34;
}

/* 核心：预定状态表格样式 */
.booking-table-container {
  width: 100%;
  overflow-x: auto; /* 横向滚动适配 */
}

.booking-detail-table {
  min-width: 800px; /* 最小宽度保证表格完整性 */
  border-collapse: collapse;
  margin: 0;
}

.day-header {
  width: 80px;
  background: #667eea;
  color: white;
  border: 1px solid #dee2e6;
}

.hour-header {
  width: 40px;
  font-size: 11px;
  text-align: center;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 4px 0;
}

.day-label {
  font-size: 12px;
  text-align: center;
  background: #eef2ff;
  border: 1px solid #dee2e6;
  font-weight: 500;
}

.booking-cell {
  width: 40px;
  height: 24px;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: all 0.2s;
}

.booking-cell:hover {
  background: #e3f2fd;
}

/* 已预定状态 */
.booked {
  background: #f56c6c;
  border-color: #e85a5a;
}

.booked:hover {
  background: #e85a5a;
}

.add-venue-btn {
  padding: 6px 16px;
  background: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

title-with-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* 与表格保持间距 */
}



.add-venue-btn:hover {
  background: #5daf34;
}

/* 弹窗样式优化 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 350px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 复用已有表单样式，保持一致性 */
.form-group {
  margin-bottom: 0; /* 弹窗内间距足够，无需额外底部间距 */
}
</style>